<template>
  <div>
    <div v-show="target == 'userInfo'" class="detail_item">
      <div class="scope_text">userInfo</div>
    </div>
    <div v-show="target == 'userLocation'" class="detail_item">
      <div class="scope_text" @click="chooseLocation(0)">
        <span> 不允许</span>
        <img
          src="/onekit/black/xuanzhong.png"
          alt=""
          style="height: 16px; margin-top: 17px"
          v-show="img_show == 0"
        />
      </div>
      <div class="scope_text" @click="chooseLocation(1)">
        <span> 仅在使用小程序期间</span>
        <img
          src="/onekit/black/xuanzhong.png"
          alt=""
          style="height: 16px; margin-top: 17px"
          v-show="img_show == 1"
        />
      </div>
      <div
        class="scope_text"
        v-show="keys.includes('scope.userLocationBackground')"
        @click="chooseLocation(2)"
      >
        <span> 使用小程序期间和离开小程序后</span>
        <img
          src="/onekit/black/xuanzhong.png"
          alt=""
          style="height: 16px; margin-top: 17px"
          v-show="img_show == 2"
        />
      </div>
    </div>
  </div>
</template>
<script>
// import Vue from "vue";
export default {
  name: "onekit-opensetting",
  data() {
    return {
      scope: {},
      keys: [],
      target: "",
      img_show: 0,
    };
  },
  created() {
    this.scope = JSON.parse(window.localStorage.getItem("scope"));
    this.keys = Object.keys(this.scope);
    this.target = this.$route.query.target;
    if (this.target == "userLocation") {
      if (this.scope["scope.userLocation"]) {
        this.img_show = 1;
      }
      if (this.scope["scope.userLocationBackground"]) {
        this.img_show = 2;
      }
    }
  },
  methods: {
    chooseLocation(chooseValue) {
      switch (chooseValue) {
        case 0:
          this.scope["scope.userLocation"] = false;
          this.scope["scope.userLocationBackground"] = false;
          localStorage.setItem("scope", JSON.stringify(this.scope));
          this.img_show = 0;
          break;
        case 1:
          navigator.geolocation.getCurrentPosition(
            () => {
              this.scope["scope.userLocation"] = true;
              this.scope["scope.userLocationBackground"] = false;
              localStorage.setItem("scope", JSON.stringify(this.scope));
              this.img_show = 1;
            },
            () => {
              if (!this.scope["scope.userLocation"]) {
                alert("请手动打开浏览器对本网站定位设置");
              }
            }
          );
          break;
        case 2:
          navigator.geolocation.getCurrentPosition(
            () => {
              this.scope["scope.userLocation"] = true;
              this.scope["scope.userLocationBackground"] = true;
              localStorage.setItem("scope", JSON.stringify(this.scope));
              this.img_show = 2;
            },
            () => {
              if (!this.scope["scope.userLocation"]) {
                alert("请手动打开浏览器对本网站定位设置");
              }
            }
          );
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style>
.detail_item {
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 50px;
  border-bottom: 1px solid #f6f6f6;
}
.scope_text {
  line-height: 50px;
  display: flex;
  justify-content: space-between;
}
.scope_switch {
  margin-top: 7.5px;
}
</style>
